<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Node对象</title>
        <style>
            div {
                border: 1px solid red
            }

            #div1 {
                width: 200px;
                height: 200px;
            }

            #div2 {
                width: 100px;
                height: 100px;
            }

            #div3 {
                width: 50px;
                height: 50px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <!--
        Node对象:节点对象
         1.特点: 所有dom对象都可以被认为是一个节点
         2.方法:
             CRUD dom树:
                  appendChild():想节点的子节点列表的结尾添加新的子节点
                  removeChild():删除(并返回)当前节点的指定子节点
                  replaceChild():用新节点替换一个子节点
         3.属性
            parentNode :返回节点的父节点
        -->
        <div id="div1">
            <div id="div2">
                div2
            </div>
            div1
        </div>
        <input type="button" id="btn" value="删除子节点">
        <a id="del" href="javascript:void(0);">删除子节点</a>
        <a id="add" href="javascript:void(0);">添加子节点</a>

        <script>
            //1.获取超链接
            var element_a = document.getElementById("del");
            //2.绑定单击事件
            element_a.onclick = function () {
                var div1 = document.getElementById("div1");
                var div2 = document.getElementById("div2");
                div1.removeChild(div2);
            }


            //1.获取超链接
            var btn = document.getElementById("btn");
            //2.绑定单击事件
            btn.onclick = function () {
                var div1 = document.getElementById("div1");
                var div2 = document.getElementById("div2");
                div1.removeChild(div2);
            }

            /*超链接功能:
                 1.可以被点击:样式
                 2.点击后跳转到href指定的URL href="",href不写 跳转当前页面
             需求:保留1功能 去掉2功能
             实现:href="javascript:void(0);"
            */
            var add = document.getElementById("add");
            add.onclick = function () {
                var div1 = document.getElementById("div1");
                //给div1添加子节点
                  //创建div节点
                var div3 = document.createElement("div");
                  //给div3设置id属性值
                div3.setAttribute("id", "div3");
                 //给div1添加子节点div3
                div1.appendChild(div3);
            }


            var div2 = document.getElementById("div2");
            var parentNode = div2.parentNode;
            alert(parentNode); //div1


        </script>
    </body>
</html>